<template>
  <div class="store clearfix">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/store' }">门店基础设置</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-container>
      <el-aside width="250px">
        <!-- 选择 -->
        <div class="">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="选择总部:" class="el-form-item__label">
              <el-select
                v-model="formInline.region"
                placeholder="请选择"
                size="small"
                @change="changeKey"
                class="selectform"
                style="width: 125px"
              >
                <el-option label="全部" value="all"></el-option>
                <el-option label="公司总部" value="CorporateHeadquarters"></el-option>
                <el-option label="上海分公司" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <!-- 公司 -->
        <div class="corporate_all" :style="{ height: asideHeight + 'px' }">
          <el-tree
            ref="mytree"
            class="eltree"
            :default-expanded-keys="defaultExpandedKeys"
            node-key="id"
            v-model="formInline"
            :data="treedata"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick"
            style="width: 200px"
          >
          </el-tree>
        </div>
      </el-aside>
      <el-main>
        <el-button type="primary" @click="addHeadquarters('form')">增加总部</el-button>
        <div class="addHeadquarters" v-show="isaddHeadquarters">
          <el-form
            :inline="true"
            :rules="rules"
            ref="form"
            :model="formInlines"
            class="demo-form-inline clearfix"
            label-width="100px"
          >
            <h1 class="w_title">增加/编辑总部信息</h1>
            <div class="zuo">
              <el-form-item label="总部编码:" prop="headquartersCode" style="position: relative">
                <el-input v-model="formInlines.headquartersCode" :disabled="isAdd"> </el-input>
                <div style="position: absolute; top: 1px; right: 10px; font-size: 20px">
                  <i class="el-icon-circle-check" v-if="zbtb == 1" style="color: green"></i>
                  <i class="el-icon-circle-close" v-if="zbtb == 2" style="color: red"></i>
                </div>
              </el-form-item>
              <el-form-item label="总部名称:" prop="headquartersName">
                <el-input v-model="formInlines.headquartersName"></el-input>
              </el-form-item>
              <el-form-item label="区域:" prop="region">
                <el-input v-model="formInlines.region"></el-input>
              </el-form-item>
              <el-form-item label="联系人:" prop="contactPerson">
                <el-input v-model="formInlines.contactPerson"></el-input>
              </el-form-item>
              <el-form-item label="电话:" prop="telephone">
                <el-input v-model="formInlines.telephone"></el-input>
              </el-form-item>
              <el-form-item label="传真:" prop="faxed">
                <el-input v-model="formInlines.faxed"></el-input>
              </el-form-item>
              <el-form-item label="省:" prop="prov">
                <el-select v-model="formInlines.prov" @change="getCity">
                  <el-option v-for="option in arr" :value="option.name" :key="option.id">
                    {{ option.name }}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="市:" prop="city">
                <el-select v-model="formInlines.city" @change="getDistrict">
                  <el-option v-for="option in cityArr" :value="option.name" :key="option.id">
                    {{ option.name }}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区:" prop="district">
                <el-select v-model="formInlines.district">
                  <el-option v-for="option in districtArr" :value="option.name" :key="option.id">
                    {{ option.name }}
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="地址:" prop="address">
                <el-input style="width: 400px" v-model="formInlines.address"></el-input>
              </el-form-item>
            </div>
            <div class="you">
              <el-form-item label="门店状态:" prop="storeStatus">
                <el-select class="md" v-model="formInlines.storeStatus" placeholder="请选择门店状态">
                  <el-option label="已营业" value="true"></el-option>
                  <el-option label="未营业" value="false"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>
          <div class="zonbu">
            <div class="anniu">
              <el-button type="success" @click="zbSave('form')">保存</el-button>
              <el-button style="margin-left: 100px" type="danger" @click="zbCancels()">取消</el-button>
            </div>
          </div>
        </div>

        <!-- 总部信息 -->
        <div class="yuLan" v-if="zbxx">
          <h1 class="zs_title">
            总部信息
            <el-button class="clone" size="small" icon="el-icon-close" circle @click="zb_clone('form')"></el-button>
          </h1>
          <el-form :inline="true" :model="dataItem" class="demo-form-inline clearfix" label-width="80px">
            <div class="zuo">
              <el-form-item style="width: 240px" label="总部编码:" prop="address">{{
                dataItem.headquartersCode
              }}</el-form-item>
              <el-form-item style="width: 240px" label="总部名称:" prop="address">{{
                dataItem.headquartersName
              }}</el-form-item>
              <el-form-item style="width: 240px" label="区域:" prop="address">{{ dataItem.region }}</el-form-item>
              <el-form-item style="width: 240px" label="联系人:" prop="address">{{
                dataItem.contactPerson
              }}</el-form-item>
              <el-form-item style="width: 240px" label="电话:" prop="address">{{ dataItem.telephone }}</el-form-item>
              <el-form-item style="width: 240px" label="传真:" prop="address">{{ dataItem.faxed }}</el-form-item>
              <el-form-item style="width: 300px" label="省:" prop="address">{{ dataItem.prov }}</el-form-item>
              <el-form-item style="width: 300px" label="市:" prop="address">{{ dataItem.city }}</el-form-item>
              <el-form-item style="width: 300px" label="区:" prop="address">{{ dataItem.district }}</el-form-item>
              <el-form-item style="width: 240px" label="地址:" prop="address">{{ dataItem.address }}</el-form-item>
            </div>
            <div class="zhong">
              <el-form-item label="门店状态:" prop="address">{{ dataItem.storeStatus }}</el-form-item>
            </div>
            <div class="you">
              <el-button style="width: 110px; margin: 0 0 5px 0" type="warning" @click="bjzb()">编辑</el-button>
              <el-button style="width: 110px; margin: 0 0 5px 0" type="danger" @click="sczb()">删除</el-button>
              <el-button style="width: 110px; margin: 0 0 5px 0" type="primary" @click="zjxd('form')"
                >增加分店</el-button
              >
            </div>
          </el-form>
        </div>

        <!-- 增加分店 -->
        <div class="addBranches" v-show="isaddBranches">
          <el-form
            :inline="true"
            ref="form1"
            :rules="rules1"
            :model="form1"
            class="demo-form-inline clearfix"
            label-width="90px"
          >
            <h1 class="w_title">增加/编辑分店信息</h1>
            <div class="zuo">
              <div class="top">
                <el-form-item label="总部名称:" prop="headquartersName">
                  <el-input v-model="form1.headquartersName" :disabled="isssZb"></el-input>
                </el-form-item>
              </div>
              <div class="bottom">
                <el-form-item label="分店编码:" prop="branchCode">
                  <el-input v-model="form1.branchCode" :disabled="isfdAdd" style="position: relative"></el-input>
                  <div style="position: absolute; top: 1px; right: 10px; font-size: 20px">
                    <i class="el-icon-circle-check" v-if="zbtb == 1" style="color: green"></i>
                    <i class="el-icon-circle-close" v-if="zbtb == 2" style="color: red"></i>
                  </div>
                </el-form-item>
                <el-form-item label="门店名称:" prop="nameOfStore">
                  <el-input v-model="form1.nameOfStore"></el-input>
                </el-form-item>
                <el-form-item label="区域:" prop="region">
                  <el-input v-model="form1.region"></el-input>
                </el-form-item>
                <el-form-item label="联系人:" prop="contactPerson">
                  <el-input v-model="form1.contactPerson"></el-input>
                </el-form-item>
                <el-form-item label="电话:" prop="telephone">
                  <el-input v-model="form1.telephone"></el-input>
                </el-form-item>
                <el-form-item label="传真:" prop="faxed">
                  <el-input v-model="form1.faxed"></el-input>
                </el-form-item>
                <el-form-item label="省:" prop="prov">
                  <el-select v-model="form1.prov" @change="getCity">
                    <el-option v-for="option in arr" :value="option.name" :key="option.id">
                      {{ option.name }}
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="市:" prop="city">
                  <el-select v-model="form1.city" @change="getDistrict">
                    <el-option v-for="option in cityArr" :value="option.name" :key="option.id">
                      {{ option.name }}
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="区:" prop="district">
                  <el-select v-model="form1.district">
                    <el-option v-for="option in districtArr" :value="option.name" :key="option.id">
                      {{ option.name }}
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="you">
              <el-form-item label="门店状态:" prop="storeStatus">
                <el-select class="md" v-model="form1.storeStatus" placeholder="请选择门店状态">
                  <el-option label="已营业" value="true"></el-option>
                  <el-option label="未营业" value="false"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="地址:" prop="address">
                <el-input style="width: 400px" v-model="form1.address"></el-input>
              </el-form-item>
              <el-form-item label="楼层:" prop="floor" style="float: right">
                <el-input style="width: 200px" v-model="form1.floor"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div class="zonbu">
            <div class="anniu">
              <el-button type="success" @click="branchStoreSave('form1')">保存</el-button>
              <el-button style="margin-left: 100px" type="danger" @click="fdCancels()">取消</el-button>
            </div>
          </div>
        </div>

        <!-- 分店信息 -->
        <div class="fdxx" v-if="fdxx">
          <h1 class="zs_title">
            分店信息
            <el-button class="clone" size="small" icon="el-icon-close" circle @click="fd_clone"></el-button>
          </h1>
          <el-form :inline="true" :model="fdDataItem" class="demo-form-inline clearfix" label-width="80px">
            <div class="zuo">
              <div class="top">
                <el-form-item style="width: 240px" label="总部名称:">{{ fdDataItem.headquartersName }}</el-form-item>
              </div>
              <el-form-item style="width: 240px" label="分店编码:">{{ fdDataItem.branchCode }}</el-form-item>
              <el-form-item style="width: 240px" label="门店名称:">{{ fdDataItem.nameOfStore }}</el-form-item>
              <el-form-item style="width: 240px" label="区域:">{{ fdDataItem.region }}</el-form-item>
              <el-form-item style="width: 240px" label="联系人:">{{ fdDataItem.contactPerson }}</el-form-item>
              <el-form-item style="width: 240px" label="电话:">{{ fdDataItem.telephone }}</el-form-item>
              <el-form-item style="width: 240px" label="传真:">{{ fdDataItem.faxed }}</el-form-item>
              <el-form-item style="width: 300px" label="省:">{{ fdDataItem.prov }}</el-form-item>
              <el-form-item style="width: 300px" label="市:">{{ fdDataItem.city }}</el-form-item>
              <el-form-item style="width: 300px" label="区:">{{ fdDataItem.district }}</el-form-item>
              <el-form-item style="width: 220px" label="地址:">{{ fdDataItem.address }}</el-form-item>
              <el-form-item style="width: 200px" label="楼层:">{{ fdDataItem.floor }}</el-form-item>
            </div>
            <div class="zhong">
              <el-form-item label="门店状态:">{{ fdDataItem.storeStatus }}</el-form-item>
            </div>
            <div class="you">
              <el-button style="width: 110px; margin: 0 0 5px 0" type="warning" @click="fdbj">编辑</el-button>
              <el-button style="width: 110px; margin: 0 0 5px 0" type="danger" @click="fdsc">删除</el-button>
              <el-button style="width: 110px; margin: 0 0 5px 0" type="primary" @click="zjgt">增加柜台</el-button>
            </div>
          </el-form>
        </div>

        <!-- 编辑柜台信息 -->
        <div v-show="showeditcounter">
          <h2>编辑柜台信息</h2>
          <el-divider></el-divider>
          <el-form :inline="true" :rules="cardcounterdata1" :model="cardcounterdata" class="demo-form-inline">
            <el-form-item label="门店名称:" prop="guitaishop">
              <el-input v-model="cardcounterdata.guitaishop" placeholder="请输输入门店信息"></el-input>
            </el-form-item>
            <el-form-item label="柜台名称" prop="guitainame">
              <el-input v-model="cardcounterdata.guitainame" placeholder="请输入柜台信息"></el-input>
            </el-form-item>
            <el-form-item label="柜台ID" prop="guitaiid">
              <el-input v-model="cardcounterdata.guitaiid" placeholder="请输入柜台ID"></el-input>
            </el-form-item>
            <el-form-item label="柜台商品品类" prop="guitaisort">
              <el-select v-model="cardcounterdata.guitaisort" placeholder="柜台商品品类">
                <el-option label="素金类" value="素金类"></el-option>
                <el-option label="钻石类" value="钻石类"></el-option>
                <el-option label="镶嵌类" value="镶嵌类"></el-option>
                <el-option label="足金类" value="足金类"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="柜台状态" prop="guitaiyingyezhuangtai">
              <el-select v-model="cardcounterdata.guitaiyingyezhuangtai" placeholder="柜台状态">
                <el-option label="生效" value="true"></el-option>
                <el-option label="失效" value="false"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Submitdata">保存并关闭</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" @click="canceleditcounter">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 增加柜台信息 -->
        <div v-show="addcounter">
          <h2>增加柜台信息</h2>
          <el-divider></el-divider>
          <el-form :inline="true" :rules="cardcounterdata1" :model="addcounterdata" class="demo-form-inline">
            <el-form-item label="门店名称:" prop="guitaishop">
              <el-input v-model="addcounterdata.guitaishop" placeholder="请输输入门店信息" :disabled="addno"></el-input>
            </el-form-item>
            <el-form-item label="柜台名称" prop="guitainame">
              <el-input v-model="addcounterdata.guitainame" placeholder="请输入柜台信息"></el-input>
            </el-form-item>
            <el-form-item label="柜台ID" prop="guitaiid">
              <el-input v-model="addcounterdata.guitaiid" placeholder="请输入柜台ID"></el-input>
            </el-form-item>
            <el-form-item label="柜台商品品类" prop="guitaisort">
              <el-select v-model="addcounterdata.guitaisort" placeholder="柜台商品品类">
                <el-option label="素金类" value="素金类"></el-option>
                <el-option label="钻石类" value="钻石类"></el-option>
                <el-option label="镶嵌类" value="镶嵌类"></el-option>
                <el-option label="足金类" value="足金类"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="柜台状态" prop="guitaiyingyezhuangtai">
              <el-select v-model="addcounterdata.guitaiyingyezhuangtai" placeholder="柜台状态">
                <el-option label="生效" value="true"></el-option>
                <el-option label="失效" value="false"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addSubmitdata">提交并关闭</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" @click="canceladdcounter">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 查看柜台信息 -->
        <div class="cardcounter" :data="cardcounterdata" v-show="downeditcounter">
          <h2>柜台信息</h2>
          <el-divider></el-divider>
          <el-descriptions class="margin-top" title="柜台基本信息" :column="3" :size="size">
            <template slot="extra">
              <el-button type="primary" @click="editinformation" size="small">编辑</el-button>
            </template>
            <template slot="extra">
              <el-button type="danger" @click="delatecounterdata" size="small">删除并关闭</el-button>
            </template>
            <template slot="extra">
              <el-button type="warning" @click="closecounterdata" size="small">关闭</el-button>
            </template>
            <el-descriptions-item label="门店名称">{{ cardcounterdata.guitaishop }}</el-descriptions-item>
            <el-descriptions-item label="柜台名称">{{ cardcounterdata.guitainame }}</el-descriptions-item>
            <el-descriptions-item label="柜台ID">{{ cardcounterdata.guitaiid }}</el-descriptions-item>
            <el-descriptions-item label="柜台商品品类">{{ cardcounterdata.guitaisort }}</el-descriptions-item>
            <el-descriptions-item label="柜台状态">
              <el-tag size="small">{{ cardcounterdata.guitaiyingyezhuangtai }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {
  addCorpApi,
  addShopApi,
  selectCorpApi,
  delCorpApi,
  updateCorpApi,
  Counterinformation,
  selectCorpAll,
  selectShopApi,
  updateShopApi,
  delShopApi,
  Modifycounter,
  addCounter,
  deleteCounter
} from '@/http/StoreInfrastructure.js'
import arrAll from '@/utils/city.js'
export default {
  name: 'StoreInfrastructure',
  data() {
    return {
      fdtb: '',
      zbtb: '',
      arr: arrAll,
      cityArr: [],
      districtArr: [],
      downeditcounter: false, //柜台信息显示
      showeditcounter: false, //柜台信息编辑
      isAdd: false,
      addcounter: false, //增加柜台
      addno: false,
      size: '',
      asideHeight: '',
      asideWidth: '',
      defaultExpandedKeys: [1],
      formInline: {
        user: '',
        region: 'all'
      },
      editform: {
        user: '',
        region: ''
      },
      treedata: [
        {
          zongBuId: '',
          label: '',
          list: [
            {
              fendianid: '1',
              label: '',
              list: [
                {
                  guitaiid: '1',
                  label: '1号柜'
                },
                {
                  guitaiid: '2',
                  label: '2号柜'
                }
              ]
            },
            {
              fendianid: '2',
              label: '九龙山店',
              list: []
            }
          ]
        },
        {
          zongBuId: '123',
          zongBuName: '北京',
          list: []
        }
      ],
      defaultProps: {
        children: 'list',
        label: 'label'
      },
      addcounterdata: {
        guitaishop: '',
        guitainame: '',
        guitaiid: '',
        guitaisort: '',
        guitaiyingyezhuangtai: ''
      },
      cardcounterdata: {
        guitaishop: '望京分店',
        guitainame: '1号柜',
        guitaiid: '3',
        guitaisort: '素金类',
        guitaiyingyezhuangtai: '1' // 状态（0：未开放；1：生效中）
      },
      cardcounterdata1: {
        storebname: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
        countername: [{ required: true, message: '请输入柜台名称', trigger: 'blur' }],
        tradename: [{ required: true, message: '请输入柜台商品品类', trigger: 'blur' }],
        status: [{ required: true, message: '请输入柜台状态', trigger: 'blur' }]
      },
      adddata: {},
      // isCounter: false, //是否增加柜台
      // gtxx: false, //柜台信息
      fdxx: false, //是否显示分店信息
      isaddBranches: false, //是否增加分店
      isaddHeadquarters: false, //是否增加总部
      zbxx: false, //总部信息
      isfdAdd: false, //是否增加分店
      isssZb: false, //是否增加总部
      formInlines: {
        headquartersCode: '', //总部编码
        headquartersName: '', //总部名称
        region: '', //区域
        contactPerson: '', //联系人
        telephone: '', //电话
        faxed: '', //传真
        address: '', //地址
        storeStatus: '', //门店状态
        prov: '', //省份
        city: '', //城市
        district: '' //区县
      },
      rules: {
        headquartersCode: [{ required: true, message: '请输入总部编码', trigger: 'blur' }],
        headquartersName: [{ required: true, message: '请输入总部名称', trigger: 'blur' }],
        region: [{ required: true, message: '请输入区域', trigger: 'blur' }],
        contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        telephone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        faxed: [{ required: true, message: '请输入传真', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        storeStatus: [{ required: true, message: '请输入门店状态', trigger: 'change' }],
        prov: [{ required: true, message: '请选择省份', trigger: 'change' }], //省份
        city: [{ required: true, message: '请选择城市', trigger: 'change' }], //城市
        district: [{ required: true, message: '请选择区县', trigger: 'change' }] //区县
      },
      form1: {
        headquartersName: '', //总部名称
        branchCode: '', //分店编码
        nameOfStore: '', //门店名称
        region: '', //区域
        contactPerson: '', //联系人
        telephone: '', //电话
        faxed: '', //传真
        address: '', //地址
        storeStatus: '', //门店状态
        floor: '', //楼层
        prov: '', //省份
        city: '', //城市
        district: '' //区县
      },
      rules1: {
        headquartersName: [{ required: true, message: '请输入总部名称', trigger: 'blur' }],
        branchCode: [{ required: true, message: '请输入分店编码', trigger: 'blur' }],
        nameOfStore: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
        region: [{ required: true, message: '请输入区域', trigger: 'blur' }],
        contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        telephone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        faxed: [{ required: true, message: '请输入传真', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        storeStatus: [{ required: true, message: '请输入门店状态', trigger: 'blur' }],
        floor: [{ required: true, message: '请输入楼层', trigger: 'blur' }],
        prov: [{ required: true, message: '请选择省份', trigger: 'change' }], //省份
        city: [{ required: true, message: '请选择城市', trigger: 'change' }], //城市
        district: [{ required: true, message: '请选择区县', trigger: 'change' }] //区县
      },
      fdDataItem: {
        headquartersName: null,
        branchCode: null,
        nameOfStore: null,
        region: null,
        contactPerson: null,
        telephone: null,
        faxed: null,
        prov: null,
        city: null,
        district: null,
        address: null,
        floor: null,
        storeStatus: null
      }, //保存后分店信息页面显示
      dataItem: {
        headquartersCode: null,
        headquartersName: null,
        contactPerson: null,
        region: null,
        telephone: null,
        faxed: null,
        prov: null,
        city: null,
        district: null,
        address: null,
        storeStatus: null
      }
    }
  },
  watch: {
    'formInlines.headquartersCode'() {
      selectCorpAll().then((res) => {
        let cc = res.data.data.filter((item) => {
          return item.zongBuId == this.formInlines.headquartersCode
        })
        if (cc.length) {
          this.zbtb = 2
        } else {
          this.zbtb = 1
        }
      })
    },
    'form1.branchCode'() {
      let fdxx = []
      selectCorpAll().then((res) => {
        res.data.data.forEach((element) => {
          element.list.forEach((item) => {
            if (item.fendianid == this.form1.branchCode) {
              fdxx.push(item)
            }
          })
        })
        if (fdxx.length > 0) {
          this.zbtb = 2
        } else {
          this.zbtb = 1
        }
      })
    }
  },
  created() {
    let h = window.innerHeight
    this.asideHeight = h - 270
    this.getCity()
    this.getDistrict()
    this.getCorpList()

    this.Querylist()
  },
  methods: {
    getCorpList() {
      selectCorpAll().then((res) => {
        this.treedata = res.data.data
      })
    },
    handleNodeClick(data) {
      this.addcounter = false
      this.isAdd = true
      this.isssZb = true

      if (data.zongBuId) {
        this.Queryheadquarters(data.zongBuId)
      } else if (data.fendianid) {
        this.isfdAdd = true
        this.Querybranch(data.fendianid)
      } else if (data.guitaiid) {
        this.getinit(data.guitaiid)
      }
    },
    //获取分店信息
    Querybranch(fendianid) {
      selectShopApi(fendianid).then((res) => {
        this.fdxx = true
        this.zbxx = false
        this.downeditcounter = false //柜台信息显示
        this.addcounter = false
        ;(this.isaddBranches = false), //是否增加分店
          (this.isaddHeadquarters = false), //是否增加总部
          (this.showeditcounter = false), //柜台信息编辑
          this.$set(this.fdDataItem, 'headquartersName', res.data.data.suoshucorp)
        this.$set(this.fdDataItem, 'branchCode', res.data.data.fendianid)
        this.$set(this.fdDataItem, 'nameOfStore', res.data.data.fendianname)
        this.$set(this.fdDataItem, 'region', res.data.data.fengbuarea)
        this.$set(this.fdDataItem, 'contactPerson', res.data.data.fengbucontact)
        this.$set(this.fdDataItem, 'telephone', res.data.data.fengbuphone)
        this.$set(this.fdDataItem, 'faxed', res.data.data.fengbufax)
        this.$set(this.fdDataItem, 'prov', res.data.data.province)
        this.$set(this.fdDataItem, 'city', res.data.data.city)
        this.$set(this.fdDataItem, 'district', res.data.data.area)
        this.$set(this.fdDataItem, 'address', res.data.data.fengbusite)
        this.$set(this.fdDataItem, 'floor', res.data.data.fengbufloor)
        this.$set(this.fdDataItem, 'storeStatus', res.data.data.yingyezhaungtai == true ? '已营业' : '未营业')
      })
    },
    //获取总部信息
    Queryheadquarters(zongBuId) {
      selectCorpApi(zongBuId).then((res) => {
        this.zbxx = true
        this.fdxx = false
        this.downeditcounter = false
        this.addcounter = false
        ;(this.isaddBranches = false), //是否增加分店
          (this.isaddHeadquarters = false), //是否增加总部
          (this.showeditcounter = false), //柜台信息编辑
          this.$set(this.dataItem, 'headquartersCode', res.data.data.zongBuId)
        this.$set(this.dataItem, 'headquartersName', res.data.data.zongBuName)
        this.$set(this.dataItem, 'contactPerson', res.data.data.person)
        this.$set(this.dataItem, 'region', res.data.data.zongBuArea)
        this.$set(this.dataItem, 'telephone', res.data.data.personPhone)
        this.$set(this.dataItem, 'faxed', res.data.data.personFax)
        this.$set(this.dataItem, 'prov', res.data.data.province)
        this.$set(this.dataItem, 'city', res.data.data.city)
        this.$set(this.dataItem, 'district', res.data.data.area)
        this.$set(this.dataItem, 'address', res.data.data.zongBuSite)
        this.$set(this.dataItem, 'storeStatus', res.data.data.yingYeZhuangTai == true ? '已营业' : '未营业')
      })
    },
    //获取柜台信息
    getinit(guitaiid) {
      Counterinformation(guitaiid).then((res) => {
        this.fdxx = false
        this.zbxx = false
        this.downeditcounter = true
        ;(this.isaddBranches = false), //是否增加分店
          (this.isaddHeadquarters = false), //是否增加总部
          (this.addCounter = false)
        ;(this.showeditcounter = false), //柜台信息编辑
          (this.cardcounterdata = res.data.data)
      })
    },
    //查询列表
    Querylist() {
      selectCorpAll()
        .then((res) => {
          this.treedata = res.data.data
        })
        .catch((err) => {
          console.log('获取总部列表失败', err)
        })
    },
    changeKey() {
      if (this.formInline.region == 'CorporateHeadquarters') {
        this.defaultExpandedKeys = [1]
      } else if (this.formInline.region == 'shanghai') {
        this.defaultExpandedKeys = [2]
      }
    },
    //点击编辑柜台
    editinformation() {
      this.showeditcounter = true
      this.downeditcounter = false
      this.addno = true
      let copy = Object.assign({}, this.cardcounterdata) //解决双向绑定数据问题
      this.adddata = copy
    },
    //取消柜台修改
    canceleditcounter() {
      this.showeditcounter = false
      this.downeditcounter = true
      this.cardcounterdata = this.adddata
      // this.$refs[formdata].resetFields();
    },
    //提交柜台修改
    Submitdata() {
      this.showeditcounter = false
      this.downeditcounter = true
      this.Modifycounters(this.cardcounterdata)
    },
    //修改柜台信息请求
    Modifycounters(obj) {
      Modifycounter(obj).then(() => {
        this.Querylist()
      })
    },
    //提交增加柜台
    addSubmitdata() {
      this.addcounter = false
      this.addCounters(this.addcounterdata)
      this.Querylist()
    },
    //增加柜台请求
    addCounters(addobj) {
      addCounter(addobj).then(() => {
        this.Querylist()
      })
    },
    //取消增加柜台
    canceladdcounter() {
      this.addcounter = false
    },
    //关闭柜台信息显示
    closecounterdata() {
      this.downeditcounter = false
    },
    //删除柜台信息
    delatecounterdata() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCounter(this.cardcounterdata.guitaiid).then(() => {
            this.downeditcounter = false
            this.Querylist()
          })

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //增加柜台
    zjgt() {
      if (!this.cardcounterdata.guitaiid) {
        this.$message({
          message: '请先选择分店',
          type: 'warning'
        })
        this.showeditcounter = false
        this.fdxx = true
      } else {
        this.showeditcounter = false
        this.addcounter = true
        this.fdxx = false
        this.addcounterdata.guitaishop = this.fdDataItem.nameOfStore
        this.addno = true
      }
    },
    //分店删除
    fdsc() {
      this.$confirm('确定删除该分店吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delShopApi(this.fdDataItem.branchCode).then(() => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.showeditcounter = false
            this.fdxx = false
            this.getCorpList()
          })

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //分店编辑
    fdbj() {
      this.fdxx = false
      this.isaddBranches = true
      let copy = Object.assign({}, this.fdDataItem)
      this.form1 = copy
    },
    //关闭分店信息
    fd_clone() {
      this.fdxx = false
      this.fdDataItem = {}
    },
    //分店取消
    fdCancels() {
      this.fdxx = true
      this.isaddBranches = false
      this.Querybranch(this.form1.branchCode)
    },
    //分店保存
    branchStoreSave(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let fendianid = this.form1.branchCode
          if (!this.fdDataItem.branchCode) {
            this.isfdAdd = true
            addShopApi(this.form1)
              .then((res) => {
                if (res.data.code == 200) {
                  this.clone(form)
                  this.isaddBranches = false
                  this.fdxx = true
                  this.getCorpList()
                  this.Querybranch(fendianid)
                  this.$message({
                    message: '添加分店成功',
                    type: 'success'
                  })
                }
              })
              .catch(() => {
                this.isfdAdd = false
                this.$message({
                  message: '添加分店失败',
                  type: 'error'
                })
              })
          } else {
            this.isfdAdd = false
            updateShopApi(this.form1).then((res) => {
              if (res.data.code == 200) {
                this.clone(form)
                this.isaddBranches = false
                this.fdxx = true
                this.getCorpList()
                this.Querybranch(fendianid)
                // 查看this.fdDataItem数据是否丢失
                this.isfdAdd = true
                this.$message({
                  message: '修改分店成功',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: '修改分店失败',
                  type: 'error'
                })
              }
            })
          }
        } else {
          return false
        }
      })
    },
    //增加分店
    zjxd(form) {
      this.$refs[form].resetFields()
      if (this.dataItem.headquartersCode == '') {
        this.$message({
          message: '请先选择总部',
          type: 'warning'
        })

        this.isaddBranches = false
        this.zbxx = true
      } else {
        this.isfdAdd = false
        this.isaddBranches = true
        this.zbxx = false
        this.isssZb = true
        this.fdDataItem.branchCode = ''
        this.form1.headquartersName = this.dataItem.headquartersName
      }
    },
    //删除总部
    sczb() {
      this.$confirm('确定删除该总部吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCorpApi(this.dataItem.headquartersCode).then((res) => {
          if (res.data.code == 200) {
            localStorage.removeItem('dataItem')
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.zbxx = false
            this.getCorpList()
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            })
          }
        })
      })
    },
    //编辑总部
    bjzb() {
      this.isaddHeadquarters = !this.isaddHeadquarters
      this.zbxx = false
      this.formInlines = this.dataItem
      let copy = Object.assign({}, this.formInlines)
      this.dataItem = copy
    },
    //关闭总部信息
    zb_clone(form) {
      this.zbxx = !this.zbxx
      this.dataItem = {}
      this.$refs[form].resetFields()
    },
    //增加总部
    addHeadquarters(form) {
      if (this.isaddHeadquarters == false) {
        this.isaddHeadquarters = true
        this.isaddBranches = false
        this.zbxx = false
        this.fdxx = false
        this.showeditcounter = false
        this.downeditcounter = false
        this.$refs[form].resetFields()
        this.dataItem.headquartersCode = ''
      } else if (this.isaddHeadquarters == true) {
        this.clone(form)
      }
      this.isAdd = false
    },
    //保存
    zbSave(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let zongBuId = this.formInlines.headquartersCode
          if (!this.dataItem.headquartersCode) {
            addCorpApi(this.formInlines)
              .then((res) => {
                if (res.data.code == 200) {
                  this.$message({
                    message: '添加总部成功',
                    type: 'success'
                  })
                  this.clone(form)
                  this.getCorpList()
                  this.Queryheadquarters(zongBuId)
                  this.zbxx = true
                  this.isAdd = true
                }
              })
              .catch(() => {
                this.isAdd = false
                this.$message({
                  message: '添加总部失败',
                  type: 'error'
                })
              })

            return false
          } else {
            updateCorpApi(this.formInlines).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: '修改总部成功',
                  type: 'success'
                })
                this.clone(form)
                this.getCorpList()
                // this.getCorp(zongBuId)
                this.Queryheadquarters(zongBuId)
                this.zbxx = true
                // localStorage.setItem('dataItem', JSON.stringify(this.dataItem))
                // this.dataItem = JSON.parse(localStorage.getItem('dataItem'))
              }
            })
          }
        } else {
          return false
        }
      })
    },
    //取消
    zbCancels() {
      this.zbxx = true
      this.isaddHeadquarters = false
      this.Queryheadquarters(this.formInlines.headquartersCode)
    },
    getCity() {
      for (var i in this.arr) {
        var obj = this.arr[i]
        if (this.isaddHeadquarters == true) {
          if (obj.name == this.formInlines.prov) {
            this.cityArr = obj.sub
            break
          }
        } else if (this.isaddBranches == true) {
          if (obj.name == this.form1.prov) {
            this.cityArr = obj.sub
            break
          }
        }
      }
    },
    getDistrict() {
      for (var i in this.cityArr) {
        var obj = this.cityArr[i]
        if (this.isaddHeadquarters == true) {
          if (obj.name == this.formInlines.city) {
            this.districtArr = obj.sub
            break
          }
        } else if (this.isaddBranches == true) {
          if (obj.name == this.form1.city) {
            this.districtArr = obj.sub
            break
          }
        }
      }
    },
    clone(form) {
      if (this.isaddHeadquarters == true) {
        this.isaddHeadquarters = !this.isaddHeadquarters
      } else if (this.fdxx == true) {
        this.fdxx = !this.fdxx
      }

      this.$refs[form].resetFields()
    }
  },
  mounted() {
    //监听窗口变化
    window.addEventListener('resize', () => {
      let h = window.innerHeight
      this.asideHeight = h - 270
    })
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  color: #333;
  .zonbu {
    height: 40px;
    position: relative;
    top: 0;
    left: 0;
    .anniu {
      position: absolute;
      top: 0;
      left: calc(50% - 120px);
    }
  }
  .w_title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    background-color: rgb(179, 172, 172);
    margin: 20px 0;
  }
  .zs_title {
    text-align: center;
    font-size: 28px;
    margin: 15px 0;
    background-color: rgb(172, 165, 165);
    position: relative;
    .clone {
      position: absolute;
      top: 2px;
      right: 50px;
      background-color: rgba(255, 255, 255, 0.332);
    }
  }
  .addHeadquarters,
  .addBranches {
    .zuo {
      width: 79%;
      float: left;
    }
    .you {
      width: 21%;
      float: right;
      .md {
        width: 150px;
      }
    }
  }
  .yuLan,
  .fdxx {
    .zuo {
      width: 65%;
      float: left;
    }
    .zhong {
      width: 20%;
      float: left;
    }
    .you {
      width: 15%;
      float: left;
    }
  }
}
.selectform {
  width: 220px;
}
.el-form-item__label {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
}
.eltree {
  width: 300px;
}
.corporate_all {
  margin-left: 15px;
  float: left;
  width: 120px;
}
.el-aside {
  border: 1px solid #ccc;
  color: #333;
  text-align: center;
  line-height: none;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
// 卡片
</style>